<template>
    <div>
        <h1>折线图</h1>
        <el-collapse accordion>
            <el-collapse-item title="基本折线图" name="1">
                <template #title>
                    <h2>基本折线图<a
                            href="https://echarts.apache.org/handbook/zh/how-to/chart-types/line/basic-line#%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%8A%98%E7%BA%BF%E5%9B%BE">#</a>
                    </h2>
                </template>
                <Case1></Case1>
                <br>
                <Case2></Case2>
                <br>
                <Case3></Case3>
                <br>
                <Case4></Case4>
                <br>
            </el-collapse-item>
            <el-collapse-item title="堆叠折线图" name="2">
                <template #title>
                    <h2>堆叠折线图<a
                            href="https://echarts.apache.org/handbook/zh/how-to/chart-types/line/stacked-line">#</a>
                    </h2>
                </template>
                <Case5></Case5>
                <br>
            </el-collapse-item>
            <el-collapse-item title="区域面积图" name="3">
                <template #title>
                    <h2>区域面积图<a
                            href="https://echarts.apache.org/handbook/zh/how-to/chart-types/line/area-line">#</a>
                    </h2>
                </template>
                <Case6></Case6>
                <br>
            </el-collapse-item>
            <el-collapse-item title="平滑曲线图" name="4">
                <template #title>
                    <h2>平滑曲线图<a
                            href="https://echarts.apache.org/handbook/zh/how-to/chart-types/line/smooth-line">#</a>
                    </h2>
                </template>
                <Case7></Case7>
                <br>
            </el-collapse-item>
            <el-collapse-item title="阶梯线图" name="5">
                <template #title>
                    <h2>阶梯线图<a
                            href="https://echarts.apache.org/handbook/zh/how-to/chart-types/line/step-line">#</a>
                    </h2>
                </template>
                <Case8></Case8>
                <br>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script setup>
    import Case1 from './LineCase1.vue';
    import Case2 from './LineCase2.vue';
    import Case3 from './LineCase3.vue';
    import Case4 from './LineCase4.vue';
    import Case5 from './LineCase5.vue';
    import Case6 from './LineCase6.vue';
    import Case7 from './LineCase7.vue';
    import Case8 from './LineCase8.vue';
</script>

<style lang="scss" scoped></style>
